<template>
	<view class="container">
		<view class="searchInput">
			<uni-icons type="search" color="#ccc"></uni-icons>
			<input style="width:85%;" type="text" v-model="searchStr" @confirm="search" />
			<uni-icons :style="{visibility:searchStr!=''?'visible':'hidden'}" type="closeempty" @click="()=>searchStr = ''"></uni-icons>
		</view>
		<songItem v-for="value in searchList.list" :key="value.id" :info="value"></songItem>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import baseUrl from '@/config.js'
	let searchList = reactive({})
	let searchStr = ref("")

	function search() {
		if(searchStr.value=='') return
		uni.request({
			url: baseUrl + "/cloudsearch",
			data: {
				keywords: searchStr.value
			},
			success(res) {
				searchList.list = res.data.result.songs
			}
		})
	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
		padding: 3vw;
	}

	.searchInput {
		border-radius: 100vw;
		display: flex;
		background: #eee;
		padding: 1vw;
		justify-content: space-around;
		align-items: center;
	}
</style>
